<template>
  <div>
    <!-- 时间区间和碳资产选择 -->
    <a-card title="碳资产追踪" bordered style="margin-bottom: 20px">
      <a-row :gutter="16">
        <a-col span="10">
          <a-form-item label="时间区间">
            <a-range-picker v-model="dateRange" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col span="14">
          <a-form-item label="选择碳资产">
            <a-checkbox-group v-model="selectedAssets">
              <a-checkbox value="碳配额">碳配额</a-checkbox>
              <a-checkbox value="碳信用">碳信用</a-checkbox>
              <a-checkbox value="绿电">绿电</a-checkbox>
              <a-checkbox value="绿碳">绿碳</a-checkbox>
              <a-checkbox value="碳汇项目">碳汇项目</a-checkbox>
              <a-checkbox value="碳金融衍生品">碳金融衍生品</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
        <a-col span="24" style="text-align: right">
          <a-button type="primary" @click="traceAssets">追溯</a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 企业当前碳资产总值 -->
    <a-card title="企业当前碳资产总值" bordered style="margin-bottom: 20px">
      <h2>{{ totalCarbonAssets }} 吨 CO2e</h2>
    </a-card>

    <!-- 追溯链条展示区域 -->
    <a-card title="碳资产追溯链条展示" bordered>
      <div style="height: 500px">
        <echart
          :option="traceChartOptions"
          name="traceChartOptions"
          style="width: 100%; height: 100%"
        />
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Echart from "/@/components/e-chart.vue"; // 使用自定义的Echart组件

// 时间区间
const dateRange = ref(null);

// 选择的碳资产类型
const selectedAssets = ref([]);

// 企业当前碳资产总值
const totalCarbonAssets = ref(10000); // 假设的总碳资产值

// 追溯链条图表配置
const traceChartOptions = {
  tooltip: {
    trigger: "item",
    formatter: (params) => `${params.data.name}: ${params.data.value}`,
  },
  series: [
    {
      type: "graph",
      layout: "force",
      data: [
        { name: "企业总碳资产", value: totalCarbonAssets.value },
        { name: "碳配额 (当前值：20吨)", value: "20吨" },
        { name: "分配 - 2023-01-01", value: "100吨" },
        { name: "使用 - 2023-01-15", value: "50吨" },
        { name: "卖出 - 2023-02-01", value: "30吨" },
        { name: "碳信用 (当前值：50吨)", value: "50吨" },
        { name: "分配 - 2023-01-10", value: "200吨" },
        { name: "使用 - 2023-01-20", value: "100吨" },
        { name: "卖出 - 2023-02-05", value: "50吨" },
      ],
      links: [
        { source: "企业总碳资产", target: "碳配额 (当前值：20吨)" },
        { source: "碳配额 (当前值：20吨)", target: "分配 - 2023-01-01" },
        { source: "碳配额 (当前值：20吨)", target: "使用 - 2023-01-15" },
        { source: "碳配额 (当前值：20吨)", target: "卖出 - 2023-02-01" },
        { source: "企业总碳资产", target: "碳信用 (当前值：50吨)" },
        { source: "碳信用 (当前值：50吨)", target: "分配 - 2023-01-10" },
        { source: "碳信用 (当前值：50吨)", target: "使用 - 2023-01-20" },
        { source: "碳信用 (当前值：50吨)", target: "卖出 - 2023-02-05" },
      ],
      roam: true,
      label: {
        show: true,
        position: "right",
        color: "#333",
      },
      force: {
        repulsion: 400,
        edgeLength: 120,
      },
      lineStyle: {
        color: "#aaa",
        width: 2,
        curveness: 0.2,
      },
      itemStyle: {
        color: "#1890ff",
      },
    },
  ],
};

// 追溯功能（这里可以添加实际逻辑以查询和计算数据）
const traceAssets = () => {
  // 模拟追溯逻辑
  console.log("选择的资产类型:", selectedAssets.value);
  console.log("时间区间:", dateRange.value);
};
</script>

<style scoped>
a-layout {
  background: #f0f2f5;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

a-button {
  margin-top: 16px;
}

h2 {
  color: #1890ff;
  font-weight: bold;
}
</style>
